<template>
	<el-dialog v-model="dialog" :title="!!state.form.shopId ? '修改店铺' : '添加店铺'" width="40%" :before-close="handleClose">
		<el-form ref="formRef" :model="state.form" :rules="state.rules">
			<el-form-item label="店铺名称" prop="name">
				<el-input v-model="state.form.name" :disabled="!!state.form.shopId"></el-input>
			</el-form-item>
			<el-form-item label="联系电话" prop="telephone">
				<el-input v-model="state.form.telephone"></el-input>
			</el-form-item>
			<el-form-item label="店铺logo" prop="logoUrls">
				<SelectMaterial v-model="state.form.logoUrls" :canChooseImagesNum="1"></SelectMaterial>
			</el-form-item>
			<el-form-item label="详细地址" prop="detailAddress">
				<el-input v-model="state.form.detailAddress"></el-input>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-radio-group v-model="state.form.status">
					<el-radio v-for="item in status" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="类型" prop="type">
				<el-radio-group v-model="state.form.type" :disabled="!!state.form.shopId">
					<el-radio label="1">自营</el-radio>
					<el-radio label="2">入驻</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleClose">关 闭</el-button>
				<el-button type="primary" :loading="loading" @click="submitForm(formRef)">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, ref, reactive } from 'vue';
import { addObj, editObj, getById } from '/@/api/shop/shopinfo';
import { ElMessage, FormInstance } from 'element-plus';
import { useDict } from '/@/utils/dict';
const SelectMaterial = defineAsyncComponent(() => import('/@/components/selectMaterial/index.vue'));
const emit = defineEmits(['initPage']);
// 字典
const { status } = useDict('status');
const state = reactive({
	form: {
		shopId: '',
		name: '',
		telephone: '',
		detailAddress: '',
		logoUrls: [],
		logoUrl: '',
		status: '',
		type: '',
	},
	rules: {
		name: [
			{
				required: true,
				message: '请输入自提点名称',
				trigger: 'change',
			},
		],
		telephone: [
			{
				required: true,
				message: '请输入联系电话',
				trigger: 'change',
			},
		],
		logoUrls: [
			{
				required: true,
				message: '请上传logo',
				trigger: 'change',
			},
		],
		detailAddress: [
			{
				required: true,
				message: '请输入详细地址',
				trigger: 'change',
			},
		],
		status: [
			{
				required: true,
				message: '请选择状态',
				trigger: 'change',
			},
		],
		type: [
			{
				required: true,
				message: '请选择类型',
				trigger: 'change',
			},
		],
	},
});
const dialog = ref(false);
const loading = ref(false);
const formRef = ref();
const region = ref({ province: '', city: '', area: '' });

const initForm = (row: any) => {
	dialog.value = true;
	state.form.shopId = '';
	if (row && row.shopId) {
		getDetail(row.shopId);
	}
};
const getDetail = (id: string) => {
	loading.value = true;
	getById(id)
		.then((response) => {
			loading.value = false;
			state.form = response.data.data;
			state.form.logoUrls = [state.form.logoUrl];
		})
		.catch(() => {
			loading.value = false;
		});
};
/**
 * 关闭事件
 */
const handleClose = () => {
	resetForm(formRef.value);
};
/**
 * 重置表单
 */
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	state.form.shopId = '';
	loading.value = false;
	dialog.value = false;
	formEl.resetFields();
	region.value = { province: '', city: '', area: '' };
};
/**
 * 提交按钮
 */
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			loading.value = true;
			state.form.logoUrl = state.form.logoUrls ? state.form.logoUrls[0] : '';
			if (state.form.shopId) {
				//修改
				edit();
			} else {
				//新增
				add();
			}
		}
	});
};
/**
 * 新增
 */
const add = () => {
	addObj(state.form)
		.then((response) => {
			resetForm(formRef.value);
			ElMessage.success('新增成功');
			emit('initPage');
		})
		.catch(() => {
			loading.value = false;
		});
};
/**
 * 修改
 */
const edit = () => {
	editObj(state.form)
		.then((response) => {
			resetForm(formRef.value);
			ElMessage.success('修改成功');
			emit('initPage');
		})
		.catch(() => {
			loading.value = false;
		});
};
defineExpose({
	initForm,
});
</script>
<style lang="scss"></style>
